<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素的内容</title>
	</head>
	<body>
		<h3><span>html()和text()方法设置元素内容</span></h3>
		<div id="html"></div>
		<div id="html2"></div>
		<div id="text">北京</div>
		<div id="text2"><h2>北京</h2></div>
		<input type="text" name="uname" id="op" value="oop" />
	</body>
	<!-- 
		操作元素的内容
			html()			获取元素的内容，包含html标签（非表单元素）
			html("内容")		设置元素的内容，包含html标签（非表单元素）
			text()			获取元素的纯文本内容，不识别HTML标签（非表单元素）
			text("内容")		设置元素的纯文本内容，不识别HTML标签（非表单元素）
			val()			获取元素的值（表单元素）
			val("值")		设置元素的值（表单元素）
			
		表单元素：
			文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
		非表单元素：
			div、span、h1~h6、table、tr、td、li、p等
		
	 -->
	 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript">
	 	// html("内容")		设置元素的内容，包含html标签（非表单元素）
		$("#html").html("<h2>上海</h2>");
		$("#html2").html("上海");
		// html()			获取元素的内容，包含html标签（非表单元素）
		var html = $("#html").html();
		var html2 = $("#html2").html();
		console.log(html);
		console.log(html2);
		
		
		// text("内容")	 设置元素的纯文本内容，不识别HTML标签（非表单元素）
		//$("#text").text("北京");
		//$("#text2").text("<h2>北京</h2>");
		// text()	获取元素的纯文本内容，不识别HTML标签（非表单元素）
		var txt = $("#text").text();
		var txt2 = $("#text2").text();
		console.log(txt);
		console.log(txt2);
		
		
		// val()			获取元素的值（表单元素）
		var val = $("#op").val();
		console.log(val);
		// 	val("值")		设置元素的值（表单元素）
		$("#op").val("今天天气不错");
	 </script>
</html>
